<template>
<div>
    <div>
    <h3 style="margin-left:20px">项目修改</h3>
    </div>
    <el-form style="width:70%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="项目名称" prop="name">
          <el-input class="taskAdd-row-title" placeholder="请输入内容" size="medium" v-model="ruleForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item  label="上级项目">
         <projectselect style="width:100%" dirType='00' :parentProjId="ruleForm.parentProjId" @parenIdtchange='parenIdtchange'></projectselect>
        </el-form-item>
        <el-form-item  label="负责人" style="margin-bottom:0px">
             <selectRoleTwo type='warehouse'  :parentProjId='ruleForm.parentProjId' selectType='singleChoice' :masterUserId='ruleForm.masterUserId' style="width:100%" @selectsuccess='selectsuccess'></selectRoleTwo>
        </el-form-item>
        <el-form-item  label="成员" style="margin-bottom:0px">
             <selectmember ref="selectmember" type='warehouse'  selectType='multipleChoice' :parentProjId='ruleForm.parentProjId' :memberList='memberList' style="width:100%;" @selectsuccess='selectsuccessmamber'></selectmember>
        </el-form-item>
        <div style="width:100%;display:flex">
        <el-form-item label="开始日期" style="width:50%" prop="startDate">
              <el-date-picker v-model="ruleForm.startDate"  value-format="yyyy-MM-dd" style="width:100%" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" style="width:50%" prop="endDate">
              <el-date-picker v-model="ruleForm.endDate"  value-format="yyyy-MM-dd" style="width:100%" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        </div>
          <el-form-item  label="所属目录" prop="dirId">
            <selectdir style="width:100%" :parentProjId="ruleForm.dirId"  @dirparenIdtchange='dirparenIdtchange' dirType='00'></selectdir>
        </el-form-item>
          <div style="display:flex">
            <span style="font-size:14px;color:rgb(96, 98, 102);font-weight:700;width:100px;text-align: end;margin-right:12px">标签</span>
            <multipleChoiceTags  :tags="ruleForm.tags" @tagChoose="tagChoose" type="00" style="width: 100%;height: 100%;margin-bottom: 22px;" ></multipleChoiceTags>
          </div>
        <el-form-item label='简介'>
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.content"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm">取消</el-button>
        </el-form-item>
    </el-form>



</div>
</template>
<script>
import projectselect from '@/components/projectComponents/selectproject'
import {getTreeData} from '@/api/project'
import selectdir from '@/components/projectComponents/selectdir'
import { save } from "@/api/project";
import { deleteAction, getAction, postAction } from "@/api/manage";
import quillEditor from "@/components/quillEditor/index";
import multipleChoiceTags from "@/components/select/multipleChoiceTags";
import selectRoleTwo from "@/components/screen/selectRoleTwo";
import selectmember from "@/components/screen/selectmember";
import utils from'@/utils/utils'
import { queryById,update} from "@/api/project";
export default {
  name: "projectEdit",
  components: {
    quillEditor,
    selectRoleTwo,
    selectmember,
    selectdir,
    projectselect,
    multipleChoiceTags
  },
  data() {
    let _this=this
    return {
          props: {
            lazy: true,
           checkStrictly: true,
          lazyLoad (node, resolve) {
            _this.getAreaForLazyLoad(node, resolve)
          }
        },
      value1: "",
      projectTree:[],
      ruleForm: {
        name: "",
        parentProjId:'',
        isLeaf:0,
        content:"",
        masterUserId:"", //负责人
        projLevel:"" ,//机构级次
        projLevelCode:"", //组织机构路径
        startDate:'',
        endDate:'',
        dirId:"",
        tags:[]
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        endDate: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
        startDate: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
        masterUserId: [{ required: true, message: "请选择项目负责人", trigger: "blur" }],
        dirId: [{ required: true, message: "请选择项目目录", trigger: "blur" }],
      },
      memberList:[],
      appproj:{
        name:"",
        current:1,
        size:20
      },
      frequency:0
    };
  },
  created() {
    this.queryByIdclic()
  },
  methods: {
       tagChoose(data){
      console.log(data);
      this.ruleForm.tags=data
    },
    parenIdtchange(data){
      this.ruleForm.parentProjId=data
      this.memberList=[]
    },
    dirparenIdtchange(data){
      this.ruleForm.dirId=data
    },
     async queryByIdclic(){
       let res=await queryById({id:this.$route.query.id})
       this.ruleForm=res.data
       this.ruleForm.userList.forEach(item=>{this.memberList.push(item.userId)})
     },
     seclectmemberclear(){
       this.memberList=[]
     },
    selectsuccessmamber(data) {
      console.log(data);
      if(!utils.isNull(data)){
        this.ruleForm.userList=[]
       let userArrat=data.split(",")
       userArrat.forEach(item=>{ let uers={'userId':item};this.ruleForm.userList.push(uers)})
      }else{
        this.ruleForm.userList=[]
      }
    },
    selectsuccess(data) {
     if(data.length>0){this.ruleForm.masterUserId=data[0].userId}
    },
    submitForm(ruleForm) {
      var _this = this
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
         update(_this.ruleForm).then(res=>{
            _this.$store.dispatch("tagsView/delView", _this.$route).then(({ visitedViews }) => {
              //  this.$router.push({ path: "/project/index",});
              _this.$EventBus.$emit("projectEdit");
              _this.$router.go(-1)
           }); // 关闭当前tab回到列表
        }).catch()
        }
        });
    },
    resetForm() {
      this.$store
        .dispatch("tagsView/delView", this.$route)
        .then(({ visitedViews }) => {
          this.$router.go(-1)
        }); // 关闭当前tab回到列表
    },
  },
};
</script>
 <style scoped>
.avatar {
  border-radius: 50%;
  width: 30px;
  /* height: 30px; */
}
.milepostselect {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  /* height: 50px; */
  /* background-color: blanchedalmond; */
  justify-content: space-between;
}
.milepostselect_div {
  display: flex;
  align-items: center;
}
.milepstdate {
  display: flex;
  width: 100%;
}
</style>
